<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Windows7 CSS Button</title>
<style type="text/css" media="screen">
body{
	padding:2em 4em;
	background-color: #F0F0F0;
	font-family:"Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:.9em;
}
h1{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-shadow: 1px 1px 1px #FFF;
}
a{
	text-decoration: underline;
	color:#00F;
}
.panel {
	border:1px solid #898C95;
	background-color:#FFF;
	padding:5px;
	clear: both;
}
.panel p {
	margin:10px;
}
.button{
	display:inline-block;
	text-decoration:none;
	color:#000;
	margin:0;
	padding:3px 0;
	border:1px solid #898C95;
	background-color:#898C95;
	border-radius:3px;
	font:.9em "Segoe UI";
}

.button span{
	margin:0;
	padding:2px 6px;
	background-color:#EBEBEB;
	background-image: -moz-linear-gradient(top, #F2F2F2, #CFCFCF);
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F2F2F2), to(#CFCFCF), color-stop(.5,#EBEBEB),color-stop(.5,#DDDDDD));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#CFCFCF');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#CFCFCF')";
	border:1px solid #FFF;
	border-radius:2px;
}
.button:hover{
	border-color: #3C7FB1;
}
.button:hover span{
	border-bottom-color:#E8F5FC;
	background-color:#D9F0FC;
	background-image: -moz-linear-gradient(top, #EAF6FD, #A7D9F5);
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EAF6FD), to(#A7D9F5), color-stop(.5,#D9F0FC),color-stop(.5,#BEE6FD));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAF6FD', endColorstr='#A7D9F5');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAF6FD', endColorstr='#A7D9F5')";
}
.button:active{
	border-color: #2C628B;
	background-color:#2C628B;
}
.button:active span{
	border-color:#9EB0BA;
	border-bottom-color:#68B3DB;
	background-color:#C4E5F6;
	background-image: -moz-linear-gradient(top, #E5F4FC, #68B3DB);
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E5F4FC), to(#68B3DB), color-stop(.5,#C4E5F6),color-stop(.5,#98D1EF));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5F4FC', endColorstr='#68B3DB');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5F4FC', endColorstr='#68B3DB')";
}

</style>
</head>

<body>
<h1 align="center">Windows7 CSS Button</h1>
<div class="panel">
  <p><A href="#" class="button"><span>button</span></A> &nbsp;<code>&lt;a class="button"&gt;</code></p>
</div>
<div style="margin-top:4em" class="panel"><p>&copy;2010 David Gonzalez Garcia - <a href="http://davidxl.blogspot.com">davidxl.blogspot.com/</a></p></div>


</body>
</html>
